<!--
 * @Description: react基础
 * @Author: rendc
 * @Date: 2022-06-15 08:40:01
 * @LastEditors: rendc
 * @LastEditTime: 2022-06-15 08:55:20
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React</title>
  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <!-- 加载我们的 React 组件。-->
  <script src="./babel.min.js"></script>
</head>

<body>
  <div>react</div>
  <div id="app">

  </div>
</body>
<script type="text/babel">
  // 组件定义（函数组件）
  // function Welcome(props){
  //   if (props.name) {
  //     return <h1>你好，{props.name}，欢迎登陆</h1>
  //   }else{
  //     return <h1>你好，请先登陆</h1>
  //   }
  // }
  // 组件定义（类组件）
  class Welcome extends React.Component{
    render(){
      let {name} = this.props
      if (name) {
        return <h1>你好，{name}，欢迎登陆</h1>
      }else{
        return <h1>你好，请先登陆</h1>
      }
    }
  }
  // 组合组件
  function App(){
    return (
      <div>
        <h1>App组件</h1>
        <Welcome name="李四"/>
        <Welcome />
      </div>
    )
  }
  // 渲染组件
  const element = (
    <div>
      <Welcome name="李四"/>
      <Welcome />
    </div>
  );
  ReactDOM.render(
    <App/>,
    document.getElementById('app')
  )
</script>

</html>